import React, { useState, useEffect } from 'react'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faEdit, faTrash, faTimes } from '@fortawesome/free-solid-svg-icons'
import { faMarkdown } from '@fortawesome/free-brands-svg-icons'
import PropTypes from 'prop-types'
import useKeyPress from '../../hooks/useKeyPress'
import style from './FileList.module.css'
import './FileList.scss'

FileList.propTypes = {
  files: PropTypes.array,
  onFileClick: PropTypes.func,
  onSaveEdit: PropTypes.func,
  onFileDelete: PropTypes.func
}

// 默认参数
FileList.defaultProps = {
  files: [],
}

export default function FileList({ files, onFileClick, onSaveEdit, onFileDelete }) {
  
  const [editStatus, setEditStatus] = useState(false)
  const [value, setValue] = useState('')
  const enterPressed = useKeyPress(13)
  const escPressed = useKeyPress(27)

  // 输入框关闭
  const closeSearch = () => {
    setEditStatus(false)
    setValue('')
  }

  useEffect(() => {
    if (enterPressed && editStatus) {
      const editItem = files.find(file => file.id === editStatus)
      onSaveEdit(editItem.id, value)
      closeSearch()
    }
    if (escPressed && editStatus) {
      closeSearch()
    }
  })

  return (
    <div className={`list-group list-group-flush file-list top-list`}>
      {
        files.map(file => {
          return (
            <div
              style={{marginRight: 0}}
              className={`row list-group-item bg-light d-flex align-items-center file-item ${style.liItem}`}
              key={file.id}
            >
              {
                // 未点击编辑按钮
                (file.id !== editStatus) && 
                <>
                  <span className='col-1'>
                    <FontAwesomeIcon
                      icon={faMarkdown} 
                    />
                  </span>
                  <span 
                    className='col-9 c-link'
                    onClick={() => onFileClick(file.id)}
                  >{file.title}</span>
                  <button 
                    type='button' 
                    className='icon-button col-1'
                    onClick={() => { setEditStatus(file.id); setValue(file.title) }}
                  >
                    <FontAwesomeIcon
                      title='编辑'
                      icon={faEdit} 
                    />
                  </button>
                  <button 
                    type='button' 
                    className='icon-button col-1'
                    onClick={() => onFileDelete(file.id)}
                  >
                    <FontAwesomeIcon
                      title='删除'
                      icon={faTrash} 
                    />
                  </button>
                </>
              }
              {
                (file.id === editStatus) && 
                <>
                  <div className='d-flex justify-content-between align-items-center'>
                    <input
                      style={{width: "90%"}}
                      value={value}
                      onChange={ (e) => setValue(e.target.value) }
                    ></input>
                    <div 
                      onClick={ closeSearch }
                    >
                      <FontAwesomeIcon 
                        title='关闭'
                        icon={faTimes} 
                      />
                    </div>
                  </div>
                </>
              }
            </div>
          )
        })
      }
    </div>
  )
}
